<template>
  <div id="app">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane  name="photo">
        <span slot="label">
          连线拍照
        </span>
        <div class="sim">
          <div>
            <h2>1.确保实验完成后，请打开桌面上的拍照软件对连线进行拍照。</h2>
            <!--<h2>2.点击<el-button @click="freshStatus()">显示照片</el-button>查看照片</h2>-->
            <h2>2.拍照完成后，切换到<el-button @click="switchReport()">实验报告</el-button>进行填写。</h2>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane  name="report">
        <span slot="label">
          实验报告
        </span>
        <div class="real">
          <vue-editor v-model="content.data" placeholder="请输入内容" v-if="step.num < 5"> </vue-editor>
          <h5 v-html="content.data" v-else></h5>
          <el-button type="primary" style="float: right" @click="doCreate()" v-if="step.num < 5">提交</el-button>
          <el-button type="primary" style="float: right" @click="goHome()" v-else>返回</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'
  import {createReport, getReport} from '@/api/api'
  export default {
    components: {
      VueEditor
    },
    data () {
      return {
        content: {data: ''},
        taskINFO: this.$store.state.taskINFO,
        step: this.$store.state.serverStep,
        activeName: 'photo'
      }
    },
    watch: {  // 跳转的时候会调用
      '$route': 'initData'
    },
    created () {
      this.initData()
      this.updateStep()
    },
    methods: {
      initData () {
        getReport(this.taskINFO.id).then(res => {
          this.content.data = res.data.text
          if (res.data.status === 0) {
            this.content.data = this.taskINFO.reportTemp
          }
        }).catch(res => {
          this.content.data = this.taskINFO.reportTemp
        })
      },
      createReport () {
        let postData = {
          name: '',
          task_id: this.taskINFO.id,
          text: this.content.data,
          account_id: ''
        }
        try {
          createReport(postData).then((res) => {
            this.$router.push({path: '/platform/myTask'})  // TODO: 这里看下根据进度跳转z
            this.$message({
              type: 'success',
              message: '提交成功'
            })
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      doCreate () {
        this.$confirm('此操作将提交实验报告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.createReport()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消提交'
          })
        })
      },
      async switchReport () {
        this.activeName = 'report'
      },
      updateStep () {
        this.$store.dispatch('updateStep', 5)
      },
      goHome () {
        this.$router.push({path: '/platform/myTask'})
      }
    }
  }
</script>

<style scoped lang="less">
  /*.el-button {*/
    /*margin: 5px;*/
    /*float: right;*/
  /*}*/
</style>
